<template>
    <div class="flex_column">
        <!-- 实时温度显示卡片 -->
        <card :width="343" :height="272" type="inner" text="实时温度显示">
            <div class="echart_content">
                <!-- 温度图表组件 -->
                <zt-echart :opts="saleOpts"></zt-echart>
            </div>
        </card>
        <!-- 实时光照显示卡片 -->
        <card class="mgt_14" :width="343" :height="272" type="inner" text="实时光照显示">
            <div class="echart_content">
                <!-- 光照图表组件 -->
                <zt-echart :opts="checkOpts"></zt-echart>
            </div>
        </card>
    </div>
</template>

<script setup lang="ts">
import { CountDateItem } from "@/model/model"; // 数据模型接口
import { Card, ZtEchart } from "@ztstory/datav-core"; // 卡片和图表组件
import { createGradientColors, createLineOpts, createLineSeriesItem } from "@ztstory/datav-core/echarts-opts"; // 图表配置工具
import { computed, ref } from "vue"; // Vue 组合式 API

// 定义组件的 Props 接口
interface Props {
    checkTicketList?: CountDateItem[]; // 光照数据列表
    saleTicketList?: CountDateItem[]; // 温度数据列表
}

const props = defineProps<Props>(); // 定义 Props

// 定义响应式变量，用于存储温度数据
const saleTicketList = ref<CountDateItem[]>([]);

// 初始化温度数据
const initializeSaleTicketList = () => {
    const now = Date.now();
    for (let i = 0; i < 10; i++) {
        const timestamp = now - (9 - i) * 600000; // 每隔10分钟
        const dateFormat = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        saleTicketList.value.push({
            count: (20 + Math.floor(Math.random() * 3)).toString(), // 随机温度
            timestamp,
            dateFormat,
        });
    }
};

// 初始化数据
initializeSaleTicketList();

// 定时更新温度数据
setInterval(() => {
    const now = Date.now();
    const timestamp = now;
    const dateFormat = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    saleTicketList.value.push({
        count: (Math.floor(20 +Math.random() * 2)).toString(), // 随机温度
        timestamp,
        dateFormat,
    });
    if (saleTicketList.value.length > 10) {
        saleTicketList.value.shift(); // 保持数组长度不超过10
    }
}, 60000); // 每分钟更新一次

// 计算属性：生成温度图表的配置项
const saleOpts = computed(() => {
    const categorys: string[] = []; // 横轴分类
    const values: string[] = []; // 数据值

    if (saleTicketList.value) {
        // 填充分类和数据值
        categorys.push(...saleTicketList.value.map((item) => item.dateFormat));
        values.push(...saleTicketList.value.map((item) => item.count));
    }

    // 创建图表配置项
    const lineOpts = createLineOpts(
        [createGradientColors(["rgba(255, 162, 0, 1)", "rgba(255, 162, 0, 0)"])], // 渐变颜色
        categorys
    );
    lineOpts.series = [createLineSeriesItem(values, true, {})]; // 设置数据系列
    return lineOpts;
});

// 定义响应式变量，用于存储光照数据
const checkTicketList = ref<CountDateItem[]>([]);

// 初始化光照数据
const initializeCheckTicketList = () => {
    const now = Date.now();
    for (let i = 0; i < 10; i++) {
        const timestamp = now - (9 - i) * 600000; // 每隔10分钟
        const dateFormat = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        checkTicketList.value.push({
            count: (350 + Math.floor(Math.random() * 80)).toString(), // 随机光照强度
            timestamp,
            dateFormat,
        });
    }
};

// 初始化数据
initializeCheckTicketList();

// 定时更新光照数据
setInterval(() => {
    const now = Date.now();
    const timestamp = now;
    const dateFormat = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    checkTicketList.value.push({
        count: (350 + Math.floor(Math.random() * 80)).toString(), // 随机光照强度
        timestamp,
        dateFormat,
    });
    if (checkTicketList.value.length > 10) {
        checkTicketList.value.shift(); // 保持数组长度不超过10
    }
}, 60000); // 每分钟更新一次

// 计算属性：生成光照图表的配置项
const checkOpts = computed(() => {
    const categorys: string[] = []; // 横轴分类
    const values: string[] = []; // 数据值

    if (checkTicketList.value) {
        // 填充分类和数据值
        categorys.push(...checkTicketList.value.map((item) => item.dateFormat));
        values.push(...checkTicketList.value.map((item) => item.count));
    }

    // 创建图表配置项
    const lineOpts = createLineOpts(
        [createGradientColors(["rgba(56, 171, 249, 1)", "rgba(56, 171, 249, 0)"])], // 渐变颜色
        categorys
    );
    lineOpts.series = [createLineSeriesItem(values, true, {})]; // 设置数据系列
    return lineOpts;
});
</script>

<style scoped lang="less">
.echart_content {
    width: 100%; /* 图表容器宽度 */
    height: 100%; /* 图表容器高度 */
    padding: 20px; /* 内边距 */
    box-sizing: border-box; /* 包括内边距在内计算宽高 */
}
</style>
